{include file="public/header" title="新增收货地址"/}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">新增收货地址</h1>
    <!--<a href="" class="mui-btn-link mui-pull-right">明细</a>-->
</header>
<style>
    body, .mui-content {
        background: #EFEFEF;
    }
</style>
<div class="mui-content layui-clear" id="my_address_add">

    <form class="layui-form" action="">
        <ul>
            <li>
                <label for="name">收货人</label>
                <div>
                    <input type="text" id="name" name="name">
                </div>
            </li>
            <li>
                <label for="phone">联系电话</label>
                <div>
                    <input type="number" id="phone" name="phone">
                </div>
            </li>
            <li>
                <label>所在地区</label>
                <div>
                    <input type="hidden" name="city" id="city">
                    <span id="cityText" class="cityText"></span>
                    <i class="sun sun-enter cityText"></i>
                </div>
            </li>
            <li>
                <label for="address">详细地址</label>
                <div>
                    <input type="text" id="address" name="address">
                </div>
            </li>
            <li class="default">
                <label for="default">设为默认</label>
                <div>
                    <input type="checkbox" id="default" name="default">
                </div>
            </li>
            <div class="btn">
                <button class="layui-btn" lay-submit lay-filter="my_address_add">保存</button>
            </div>
        </ul>
    </form>

</div>
<script src="/static/mui/js/city.data-3.js"></script>
<script>
    (function ($) {
        $.init({
            swipeBack: true //启用右滑关闭功能
        });
    })(mui);
    var $ = layui.$, form = layui.form;

    form.on('submit(my_address_add)', function (data) {
        var param = data.field;
        if (!param.name) {
            layer.tips('请输入收货人', '#name', {tips: 3});
            return false;
        }
        if (!param.phone) {
            layer.tips('请输入联系电话', '#phone', {tips: 1});
            return false;
        }
        if (!/^1[34578]{1}\d{9}$/.test(param.phone)) {
            layer.tips('请输入正确的手机号码', '#phone', {tips: 1});
            return false;
        }
        if (!param.city) {
            layer.tips('请选择所在地', '#cityText', {tips: 1});
            return false;
        }
        if (!param.address) {
            layer.tips('请输入详细地址', '#address', {tips: 1});
            return false;
        }
        if (param.address.length < 5) {
            layer.tips('至少5个字符', '#address', {tips: 1});
            return false;
        }
        $.post("{:url('my_address_add')}", param, function (response) {
            mui.toast(response.msg, {duration: 2000, type: 'div'});
            if (response.code === 200) {
                setTimeout(function () {
                    location.href = "{:url('my_address')}";
                }, 2000);
            }
        });
        return false;
    });

    /**
     * 选择省市区
     */
    $('.cityText').click(function () {
        var picker = new mui.PopPicker({layer: 3});
        picker.setData(cityData3);
        picker.show(function (selectItems) {
            var value = selectItems[0].text + selectItems[1].text;
            var text = selectItems[0].text + '-' + selectItems[1].text;
            if (selectItems[2].text !== undefined) {
                text += '-' + selectItems[2].text;
                value += selectItems[2].text;
                $('#area').val(selectItems[2].text);
            }
            $('#cityText').html(text);
            $('#city').val(value);
        })
    });

</script>
{include file="public/footer"/}